<template>
  <el-card class="box-card" shadow="hover">
    <div slot="header" class="clearfix">
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="学生姓名">
          <el-input v-model="studentSearch.sname" placeholder="学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="学生住址">
          <el-input v-model="studentSearch.addr" placeholder="学生住址"></el-input>
        </el-form-item>
        <el-form-item label="所在班级">
          <el-select v-model="studentSearch.cid" placeholder="所在班级">
            <el-option label="所有班级" value="0"></el-option>
            <el-option :label="c.cname" :value="c.cid" v-for="c in classes"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search(page,pagesize,studentSearch)">搜索</el-button>
          <el-button type="success" plain icon="el-icon-circle-plus" @click="addStudent">添加</el-button>
          <el-button type="danger" plain icon="el-icon-delete" @click="handleDelete">批量删除</el-button>
        </el-form-item>
      </el-form>
    </div>
      <el-table
        :data="students"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          label="学号"
          prop="sid"
          width="180">
        </el-table-column>
        <el-table-column
          label="姓名"
          prop="sname"
          width="180">
        </el-table-column>
        <el-table-column
          label="性别"
          prop="sex"
          width="100">
        </el-table-column>
        <el-table-column
          label="年龄"
          prop="age"
          width="120">
        </el-table-column>
        <el-table-column
          label="住址"
          prop="addr"
          width="180">
        </el-table-column>
        <el-table-column
          label="所在班级"
          prop="cname"
          width="180">
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            <el-button
              size="mini"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>

    <addOrUpdate v-if="componentVisible" ref="studEdit" @flushData="search(page,pagesize,studentSearch)"></addOrUpdate>
  </el-card>
</template>

<script>
  import {findStudents,findByPage,search,delStud} from "@/api/student"
  import {findClasses} from "@/api/classes";
  import addOrUpdate from "@/views/student/add_or_update";
  export default {
        name: "index",
      data(){
        return {
          students: [],
          page:1,                   // 代表当前页
          pagesize:5,               // 代表每页大小
          total:100,                // 代表总记录数
          studentSearch:{sname:'',addr:'',cid:0},     // 搜索表单的学生
          classes:[],              // 查询所有班级
          componentVisible: false,  // 组件的显示与隐藏
          multipleSelection:[],     // 点击复选框选择的学生
          sids:[],                  // 代表要删除的学号
        }
      },
    components:{addOrUpdate},
      created() {
          //1. 查询所有学生
          // this.findAllStudents();
          //2. 分页查询学生
         // this.findByPage(this.page,this.pagesize)
          //3. 查询所学班级
         this.findClasses()
          //4. 条件查询带搜索
         this.search(this.page,this.pagesize,this.studentSearch)
      },
      methods:{
        //1. 编辑学生
        handleEdit(index, row) {
            //1.1 打开子组件显示当前的学生
            this.componentVisible = true
            //1.2 调用子组件的初始化方法
            this.$nextTick(()=>{
              this.$refs.studEdit.init(row);
            })
        },
        //2. 删除学生
        handleDelete(index, row) {
          //2.1 如果this.sids没有值就添加
          if(row){
            this.sids = [row.id];
          }else{
            //2.2 组织数据（不管是删除一个还是多个都放在一个数组中）
            this.sids = this.multipleSelection.map(m=>m.id)
          }
          console.log("sids:",this.sids)
          let _this =this;
          this.$confirm(`是否真的要删除学生${this.sids}`, '温馨提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            // 执行真正的删除操作
            delStud(this.sids).then((data)=>{
              if(data.code == 20000){
                this.$message({
                  type: 'warning',
                  message: data.message,
                  onClose(){
                    _this.search(_this.page,_this.pagesize,_this.studentSearch)
                  }
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消删除'
            });
          });
        },
        //3.页大小改变时触发
        handleSizeChange(val) {
          this.pagesize = val;
          this.search(this.page,this.pagesize,this.studentSearch);
          // this.findByPage(this.page,this.pagesize)
          console.log(`每页 ${val} 条`);
        },
        //4.当前页改变时触发
        handleCurrentChange(val) {
          this.page = val;
          this.search(this.page,this.pagesize,this.studentSearch);
          // this.findByPage(this.page,this.pagesize)
          console.log(`当前页: ${val}`);
        },
        //5.查看所有学生
        async findAllStudents(){
          // findStudents().then((data)=>{
          //   console.log("data:",data)
          //   this.students = data.data.list;
          // })
          //相当于：
          let {data} = await findStudents();
          this.students = data.list;
        },
        //6.分页查询
        async findByPage(page,pagesize){
          // findByPage(page,pagesize).then(({data})=>{
          //   console.log("data::::",data)
          //   //6.1 重新设置总记录数
          //   this.total = data.pr.total;
          //   //6.2 设置每页的集合数据
          //   this.students = data.pr.rows;
          // })
          //相当于：
          let {data} = await findByPage(page,pagesize);
          //6.1 重新设置总记录数
          this.total = data.pr.total;
          //6.2 设置每页的集合数据
          this.students = data.pr.rows;
        },
        //7. 查询所学班级
        async findClasses(){
          // findClasses().then(({data})=>{
          //   console.log(data)
          //   this.classes = data.list;
          // })
          //相当于：
          let {data} = await findClasses();
          this.classes = data.list;

        },
        //8. 条件查询带分页
        async search(page,pagesize,studentSearch){
          // search(page,pagesize,studentSearch).then(({data})=>{
          //   //8.1 重新设置总记录数
          //   this.total = data.pr.total;
          //   //8.2 设置每页的集合数据
          //   this.students = data.pr.rows;
          // })
          //相当于：
            let {data} = await search(page,pagesize,studentSearch);
            //8.1 重新设置总记录数
            this.total = data.pr.total;
            //8.2 设置每页的集合数据
            this.students = data.pr.rows;
        },
      //9. 添加学生
        addStudent(){
          //9.1 显示整个控件
          this.componentVisible = true
          //9.2 调用初始化方法
          this.$nextTick(()=>{
            this.$refs['studEdit'].init();
          })
        },
        // 10.点击复选框选择要删除的学生
        handleSelectionChange(val) {
          this.multipleSelection = val;
          // console.log(this.multipleSelection)
        }
      }
    }
</script>

<style scoped>
  .box-card{
    margin:15px;
  }
  .el-pagination{
    text-align: right;
    margin-top: 20px;
  }
</style>
